<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>处置方案录入</title>
    <link rel="stylesheet" href="/css/element.css">
</head>
<body>
<script src="/js/Vue.js"></script>
<script src="/js/element.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/Qs.js"></script>
<script type="text/javascript" src="/js/layer.js"></script>
<style>
    #tools .el-button {
        padding: 10px 8px 10px 5px;
    }
    #tools .el-card__body {
        padding: 5px 5px 5px 20px;
    }

    #tools .el-button {
        padding: 10px 8px 10px 5px;
    }

    .el-button {
        margin-left: 0 !important;
    }

    .el-input__inner {
        height: 38px;
    }

    .text {
        font-size: 14px;
    }

    .item {
        padding: 18px 0;
    }

    .el-card {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 2px;
    }

    .el-table_1_column_5:hover {
        cursor: pointer;
        border-bottom: 2px solid #409EFF;
    }

    .el-pagination {
        margin-top: 5px;
    }
    #app {
        height:100%;
    }
    #search .el-card__body {
        height:40px;
    }
    #table {
        height:calc(100% - 124px);
    }
</style>
<div id="app">
    <!--    查询框-->
    <el-card class="box-card" id="search">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="处置方案名称">
                <el-input v-model="searchForm.keyword" placeholder="请输入要查询的内容" style="width:200px;"></el-input>
            </el-form-item>
            <el-form-item label="类型">
                <el-select v-model="searchForm.categoryid" placeholder="处置方案类型">
                    <el-option v-for="item in categoryList" :key="item.index" :label="item.categoryName"
                               :value="item.categoryId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button size="medium" type="primary" size="large">查询</el-button>
            </el-form-item>
        </el-form>
    </el-card>
    <!--工具栏-->
    <el-card id="tools">
        <el-row>
            <el-button size="small" icon="el-icon-document-add" type="primary" @click="addProgram">
                添加处置方案
            </el-button>
            <el-button size="small" icon="el-icon-document-delete" type="danger">删除处置方案</el-button>
        </el-row>
    </el-card>
    <!--    查询数据展示表格-->
    <el-card id="table">
        <el-table
                border
                :stripe="true"
                ref="multipleTable"
                :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                @cell-click="cellClick">
            <el-table-column
                    type="selection">
            </el-table-column>

            <el-table-column label="类型">
                <template slot-scope="scope">{{ scope.row.categoryId | asType }}</template>
            </el-table-column>
            <el-table-column
                    prop="asName"
                    label="名称">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="创建时间"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="html"
                    label="预览(点击查看)"
                    show-overflow-tooltip>
            </el-table-column>
        </el-table>
        <!--        页码-->
        <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                layout="total,prev, pager, next, jumper"
                :total="tableData.length">
        </el-pagination>
    </el-card>
    <!--添加处置方案-->
    <el-dialog title="添加处置方案" :visible.sync="asFormVisible" :modal="false">
        <el-form :model="asForm" ref="asForm">
            <el-form-item label="处置方案名称" :label-width="formLabelWidth">
                <el-input v-model="asForm.asName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="处置方案类别" :label-width="formLabelWidth">
                <el-select v-model="asForm.categoryId" placeholder="请选择处置方案类别">
                    <el-option v-for="item in categoryList" :key="item.index" :label="item.categoryName"
                               :value="item.categoryId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="适用预案选择" :label-width="formLabelWidth">
                <el-select v-model="scriptId" placeholder="请选择预案">
                    <el-option v-for="item in programData" :key="item.index" :label="item.name"
                               :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <!-- 文件上传 -->
            <el-form-item label="相关文件" :label-width="formLabelWidth">
                <el-upload
                        ref="uploadFile"
                        class="upload-demo"
                        action="#"
                        :file-list="fileList"
                        :auto-upload="false"
                        :on-change="uploadFile"
                        :name="asForm.fileUrl">
                    <el-button size="small" type="primary">点击上传预案对应的word文档</el-button>
                    <div slot="tip" class="el-upload__tip">
                        只能上传doc/docx文件!
                    </div>
                </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="asFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="asFormVisible = false">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>
    var that;
    var asid;
    var asData;
    var vue = new Vue({
        el: "#app",
        data: {
            programData: [{name: "预案1", value: 1}, {name: "预案2", value: 2}, {name: "预案3", value: 3}, {
                name: "预案4",
                value: 4
            }, {name: "预案5", value: 5}],
            //翻页相关数据
            currentPage: 1,
            pageSize: 10,
            scriptId: '',
            //查询数据
            searchForm: {
                categoryid: '',
                keyword: ''
            },
            formLabelWidth: '120px',
            asFormVisible: false,
            asForm: {
                //处置方案名称
                asName: '',
                //处置方案类别
                categoryId: '',
                //试用范围
                useRange: '',
            },
            file: '',
            //文件列表
            fileList: [],
            //处置方案类型
            categoryList: [],
            //表格数据
            tableData: [
                {
                    "asid": "4028ac8f773dd59501773dd74cc60000",
                    "asName": "测试预案",
                    "categoryId": 1,
                    "useRange": null,
                    "docName": "《软件工程Ⅰ》设计报告要求.docx",
                    "html": "1611650255329.html",
                    "createTime": "2021-01-26"
                },
                {
                    "asid": "4028ac8f773dea3701773deb41df0000",
                    "asName": "测试一",
                    "categoryId": 1,
                    "useRange": null,
                    "docName": "《软件工程Ⅰ》设计报告要求.docx",
                    "html": "1611651563232.html",
                    "createTime": "2021-01-26"
                },
                {
                    "asid": "4028ac8f774155d50177419ae45e0000",
                    "asName": "测试三",
                    "categoryId": 1,
                    "useRange": null,
                    "docName": "浙江永康市供电公司电力服务事件应急预案201501.doc",
                    "html": "1611713405754.html",
                    "createTime": "2021-01-27"
                },
                {
                    "asid": "402881ed7741bcf5017742aa6fad0000",
                    "asName": "添加预案测试1",
                    "categoryId": 2,
                    "useRange": "适用范围测试1",
                    "docName": "费用报销流程.docx",
                    "html": "1611731201706.html",
                    "createTime": "2021-01-27"
                }
            ],
            //预案类型
            categoryList: [
                {
                    "categoryId": 1,
                    "categoryName": "事故",
                    "pid": null,
                    "detail": null
                },
                {
                    "categoryId": 2,
                    "categoryName": "自然灾害",
                    "pid": null,
                    "detail": null
                },
                {
                    "categoryId": 3,
                    "categoryName": "测试类别",
                    "pid": null,
                    "detail": null
                },
                {
                    "categoryId": 5,
                    "categoryName": "111",
                    "pid": null,
                    "detail": null
                },
                {
                    "categoryId": 6,
                    "categoryName": "222",
                    "pid": null,
                    "detail": null
                }
            ],
            multipleSelection: [],
        },
        filters: {
            asType(val) {
                const typeArray = that.categoryList;
                for (let i = 0; i < typeArray.length; i++) {
                    if (typeArray[i].categoryId == val) {
                        return typeArray[i].categoryName;
                    }
                }
            }
        },
        beforeCreate() {
            that = this;
        },
        mounted() {
        },
        methods: {
            addProgram() {
                layer.open({
                    type: 2,
                    title: '添加处理方案',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['500px', '450px'],
                    content: '../dialog/program/addProgram.html'
                });
            },
            //页码相关
            handleCurrentChange(val) {
                this.currentPage = val;
            },
            //设置事件响应步骤弹窗
            setResponse() {
                if (this.multipleSelection.length == 1) {
                    asid = this.multipleSelection[0].asid;
                    //查询响应步骤
                    let params = {asid: asid}
                    axios.get('/step/find', {params}).then(res => {
                        //若有数据，则将查询结果存储到全局asData中
                        if (res.data.level1[0].length !== 0) {
                            asData = res.data;
                        } else {
                            asData = null;
                        }
                    }).catch(err => {
                        console.log(err);
                    });
                    //打开弹窗
                    layer.open({
                        type: 2,
                        title: '设置事件响应步骤',
                        shadeClose: true,
                        shade: false,
                        maxmin: true, //开启最大化最小化按钮
                        area: ['1000px', '600px'],
                        content: '/dialog/assumption/stepResponse.html?asid=' + asid
                    });
                } else {
                    layer.alert("请勾选单个处置方案后再点击设置！");
                }

            },
            //添加文件事件
            uploadFile(file, fileList) {
                //获取到图片链接
                this.file = fileList[0].raw;
            },
            // 查看预览
            cellClick(row, column, cell, event) {
                console.log(row);
                console.log(column);
                console.log(cell);
                console.log(event);
                // const url = `http://localhost/assumption/${row.html}`;
                // window.open(url, '_blank');
            },
            //查询处置方案

            //发布处置方案
            asAdd() {
                let form = new FormDataUtils(this.asForm)
                form.append('file', this.file)
                form.send('/assumption/add', (response) => {
                    var res = JSON.parse(response)
                    if (res.success) {
                        this.$message.success('添加成功！')
                        //关闭 Dialog
                        this.asFormVisible = false
                        //重置表单
                        this.$refs.asForm.resetFields()
                        //清空upload图片列表
                        this.$refs.uploadFile.clearFiles()
                    } else {
                        this.$message.error('添加失败！')
                        this.asFormVisible = false
                    }
                })
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
        }
    })
</script>
</body>
</html>